<template>
  <div class="app-container">
    <div class="warp_padding">   
    <div >
      <el-form :inline="true" :model="formDate" class="demo-form-inline" >
        <!-- <el-form-item label="区县">
          <el-select v-model="formDate.areaCode" placeholder="区县">
            <el-option v-for="item in areaCode" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="校群">
          <el-select v-model="formDate.groupId" placeholder="校群">
            <el-option v-for="item in groupId" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
          </el-select>          
        </el-form-item> -->
        <el-form-item label="学校ID">
          <el-input v-model="formDate.schId" placeholder="学校" size="mini" style="width:180px"></el-input>
        </el-form-item>       
        <el-form-item label="设备ID">
          <el-input v-model="formDate.deviceId" placeholder="设备ID" size="mini"  style="width:180px"></el-input>
        </el-form-item>         
        <el-form-item label="开始时间">
            <el-date-picker v-model="formDate.createtime" type="date" size="mini"  style="width:180px" :picker-options="pickerCreatetime" placeholder="选择开始时间"  @change="getStartime">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
            <el-date-picker v-model="formDate.endtime" type="date" size="mini"  style="width:180px" :picker-options="pickerCreatetime" placeholder="选择结束时间"  @change="getStartime">
            </el-date-picker>
        </el-form-item>             
        <el-form-item>
          <el-button type="primary" @click="gettablist" size="mini" >查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="lists" style="width: 100%;margin:10px 0;" >
        <el-table-column prop="number" label="序号" min-width="5%">          
        </el-table-column>
        <el-table-column prop="userId"  label="用户ID" min-width="8%">
        </el-table-column>
        <el-table-column prop="deviceId"  label="设备ID" min-width="8%">
        </el-table-column>
        <el-table-column prop="schId"  label="学校ID" min-width="8%">
        </el-table-column>
        <el-table-column prop="interactTeaType"  label="互动老师类型" min-width="8%">
        </el-table-column>       
        <el-table-column prop="createtime"  label="登录时间" min-width="8%">
        </el-table-column>
        <el-table-column prop="endtime"  label="登出时间" min-width="8%">
        </el-table-column>          
      </el-table>      
    </div>
    <!--工具条-->
    <!-- <el-col :span="24" class="toolbar">       
       <el-pagination background   @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" 
       :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" 
       :pager-count="pagerCount" :total="total"  class="pagination">
       </el-pagination>
    </el-col> -->
  </div>
  </div>
</template>

<script>
  import { logKsList } from '@/api/echarts'
    export default {
      data() {
        return {
          formDate:{
            pageNo: 1,  
            pageSize:10,       
            schId:'',
            createtime:'',
            endtime:'',
            userId:'0',
            deviceId:'',
            interactTeaType:'',
            userId:''
          },
          lists: [],
          pickerCreatetime: {
            disabledDate: time => {
              if (this.formDate.endtime) {
                return (
                  time.getTime() > new Date ( this.formDate.endtime ).getTime()
                )
              } else {
                // 不能大于当前日期
                  return time.getTime() > Date.now()
              }
            }
          },
          /*pickerEndtime: {
            disabledDate: time => {
              if(this.formDate.createtime) {
                return (
                  time.getTime() > Date.now() ||
                  time.getTime() < new Date(this.formDate.createtime).getTime() - 8.64e7 // 加- 8.64e7则表示包当天
                )
              } else {
                return time.getTime() < Date.now()
              }
            }
          }*/
        }
      },
      mounted() {
        this.init();
      }, 
      methods: { 
        gettablist() {
           this.init();
        },       
        init(){
            // this.formDate.userId = this.formDate.userId.trim()
            logKsList(  this.formDate ).then(res => {
              // console.log(res)
              let { list, total } = res
              this.lists = list
              this.total = total
            })
        },
        getStartime(){
            let sta = this.formDate.createtime,
                end = this.formDate.endtime;
            if (sta  >= end ) {
                return this.formDate.endtime  = ''
            }
           
        }
      }
    }
  </script>

  <style scoped lang="scss">
    .classlog {
     padding:10px 15px;  
    }
  </style>
